<template>
  <el-container>
    <el-header>开发者团队</el-header>
    <el-main>
      <el-row >
        <el-col v-for="(developer, key) in developers" :key="key" :span="7" class="box-card">
          <el-card style="height: 300px">
            <div style="padding: 14px;">
              <div class="clearfix">
                <img class="avatar" :src="developer.avatar">
                <h2 class="developer-name">{{ developer.name }}</h2>
                <small>联系方式：{{ developer.position }}</small>
              </div>
              <div class="bottom clearfix">
                <div>负责方向：{{ developer.bio }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import { reactive } from 'vue';
import logo from '@/assets/logo.png'
export default {
  setup() {
    const developers = reactive([
      { avatar: logo, name: '刘彦宏', position: 'XXXXXXXXXXX@163.com', bio: '主程序，算法编辑主要成员' },
      { avatar: logo, name: '毛云', position: 'XXXXXXXXXXX@163.com', bio: '后端开发，算法编辑' },
      { avatar: logo, name: '曲金鑫', position: 'XXXXXXXXXXX@163.com', bio: '后端开发' },
      { avatar: logo, name: '郑琳那', position: 'XXXXXXXXXXX@163.com', bio: '前端开发' },
      { avatar: logo, name: '王榕', position: 'XXXXXXXXXXX@163.com', bio: '前端开发' },
      // 更多开发者...
    ]);
    return { developers };
  }
};
</script>

<style scoped>
.avatar {
  display: inline-block;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background-color: #eee;
  object-fit: cover;
}

.developer-name {
  margin: 20px 0;
}

.bottom {
  margin-top: 20px;
}

.box-card {
  margin: 20px;
  transition: transform 0.3s;
}

.box-card :hover{
  transform: scale(1.05);
}

</style>
